<template>
  <header>
    <div class="container">
      <nav>
        <div class="logo">
          <router-link to="/">
            <span class="logo-icon">❤️</span>
            <span class="logo-text">心灵守护站</span>
          </router-link>
        </div>
        <ul class="nav-links">
          <li><router-link to="/" exact active-class="active">首页</router-link></li>
          <li><router-link to="/diary" active-class="active">情绪日记</router-link></li>
          <li><router-link to="/emotion-analysis" active-class="active">情绪分析</router-link></li>
          <li><router-link to="/relaxation" active-class="active">放松练习</router-link></li>
          <li><router-link to="/resources" active-class="active">心理资源</router-link></li>
          <li><router-link to="/about" active-class="active">关于我们</router-link></li>
          <li><router-link to="/user-center" active-class="active">个人中心</router-link></li>
        </ul>
        <div class="mobile-menu-btn"
             @click="toggleMobileMenu"
             v-if="isMobile">
          <span class="menu-icon"></span>
        </div>
      </nav>
      <!-- 移动端菜单 -->
      <div class="mobile-menu" v-show="showMobileMenu">
        <ul>
          <li><router-link to="/" exact @click="closeMobileMenu">首页</router-link></li>
          <li><router-link to="/diary" @click="closeMobileMenu">情绪日记</router-link></li>
          <li><router-link to="/emotion-analysis" @click="closeMobileMenu">情绪分析</router-link></li>
          <li><router-link to="/relaxation" @click="closeMobileMenu">放松练习</router-link></li>
          <li><router-link to="/resources" @click="closeMobileMenu">心理资源</router-link></li>
          <li><router-link to="/about" @click="closeMobileMenu">关于我们</router-link></li>
          <li><router-link to="/user-center" @click="closeMobileMenu">个人中心</router-link></li>
        </ul>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  name: 'Header',
  data() {
    return {
      showMobileMenu: false,
      isMobile: false
    }
  },
  mounted() {
    this.checkScreenSize()
    window.addEventListener('resize', this.checkScreenSize)
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.checkScreenSize)
  },
  methods: {
    checkScreenSize() {
      this.isMobile = window.innerWidth < 768
    },
    toggleMobileMenu() {
      this.showMobileMenu = !this.showMobileMenu
    },
    closeMobileMenu() {
      this.showMobileMenu = false
    }
  }
}
</script>

<style scoped>
.logo {
  font-size: 24px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-icon {
  font-size: 28px;
}

.logo-text {
  color: white;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 24px;
}

.nav-links a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  padding: 8px 0;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--accent-color);
  transition: width 0.3s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--accent-color);
}

.mobile-menu-btn {
  display: none;
  cursor: pointer;
}

.menu-icon {
  display: block;
  width: 24px;
  height: 2px;
  background-color: white;
  position: relative;
}

.menu-icon::before,
.menu-icon::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 2px;
  background-color: white;
  transition: all 0.3s ease;
}

.menu-icon::before {
  top: -8px;
}

.menu-icon::after {
  bottom: -8px;
}

.mobile-menu {
  position: fixed;
  top: 76px;
  left: 0;
  right: 0;
  background-color: var(--primary-color);
  z-index: 1000;
  padding: 20px 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.mobile-menu ul {
  list-style: none;
  text-align: center;
}

.mobile-menu li {
  margin: 16px 0;
}

.mobile-menu a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  transition: color 0.3s ease;
}

.mobile-menu a:hover {
  color: var(--accent-color);
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
  
  .mobile-menu-btn {
    display: block;
  }
  
  .logo {
    font-size: 20px;
  }
}
</style>